<template>
  <div class="wrapper">
    <el-row :gutter="10" style="margin-top:80px">
      <el-col :xs="22" :lg="22" :offset="2" class="class_info">
        <div>
          <img :src="classDetail.cover" class="class_title_img">
        </div>
        <div class="class_info_content">
          <div>来源平台:{{classDetail.sourcePlatform}}</div>
          <div>课程标签:{{classDetail.catalogue}}</div>
          <div>课程时间：{{classDetail.courseTime}}</div>
          <div>官网价格：￥{{classDetail.officialPrice}}</div>
        </div>
        <div class="class_info_content">
          <div>
            课程评分:
            <span style="color:orange">{{classDetail.comScore}}</span>
          </div>
          <div>评论人数：{{classDetail.commentNum}}人</div>
        </div>
      </el-col>
      <el-col :xs="22" :lg="22" :offset="2">
        <div style="font-weight:bold;font-size:25px;color:#ccc">注：内容区:内容格式待定</div>
        <div style="font-weight:bold;font-size:25px;">{{classDetail.introduction}}</div>
      </el-col>
      <el-col :xs="22" :lg="22" :offset="2" style="margin-top:20px;margin-bottom:200px">
        <div>
          <span style="font-weight:bold;margin-right:20px">课程评价</span>
          <span style="cursor:pointer">
            更多{{comments.num}}条
            <span class="iconfont">&#xe61c;</span>
          </span>
        </div>
        <div v-for="(item,index) of comments.default" :key="index" v-show="!checkmore">
          <div style="display:flex;">
            <div>
              <img :src="item.avatar" style="width:70px;height:70px;">
            </div>
            <div class="nickName">
              <div>{{item.nickName}}</div>
              <div>粉丝({{item.fansNum}})</div>
            </div>
            <div style="position:relative">
              <div class="iconfont adduser" @click="followThisUser(item)">&#xe7ae;</div>
            </div>
          </div>
          <div style="margin-top:10px">评分
            <el-rate
              v-model="item.score"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              style="display:inline-block"
              :max="max"
              allow-half
              disabled
              show-score
            ></el-rate>
            <div></div>
          </div>
          <div style="margin-top:10px;line-height:28px">
            {{item.content|readmore(100,'......')}}
            <span
              style="margin-top:4px;float:right;margin-right:10px;color:#409EFF;cursor:pointer"
              @click="navToDetail(item)"
            >查看详情</span>
          </div>
          <div>
            <el-input
              v-model="item.publishcomments"
              placeholder="写下你的评论"
              @focus="handlecomments(item,'focus')"
              @blur="handlecomments(item,'blur')"
              style="width:90%;margin:10px 0"
            ></el-input>
            <el-button
              type="primary"
              round
              style="display:inline-block;margin-left:10px"
              size="small"
              v-if="item.publish"
              @click="publishcomments(item)"
            >评论</el-button>
          </div>
          <div style="margin-top:10px">
            <div class="intersection">
              <span class="iconfont" @click="showItemComment(item)">&#xe675; {{item.commentNum}}</span>
              <span class="iconfont">&#xe7c8; {{item.userLike}}</span>
              <span class="iconfont">&#xe7c9; {{item.userDislike}}</span>
            </div>
            <div style="clear:both"></div>
          </div>
          <div v-if="item.showComment" class="showComment">
            <div>
              <h1>{{item.commentNum}}条评论</h1>
              <span>
                <el-button type="text" style="float:right" @click="item.showComment=false"><span class="iconfont">&#xe782;</span> 收起</el-button>
              </span>
            </div>

            <div
              v-for="(childs,childindex) of item.commentsDetail"
              :key="childindex+'commentNum'"
              style="margin:10px 0"
            >
              <div class="commentsDetail">
                <div>
                  <img :src="childs.avatar" alt style="width:70px;height:70px;">
                </div>
                <div
                  style="display:flex;flex-direction:column;justify-content:space-around;margin:0 20px"
                >
                  <div>{{childs.nickName}}</div>
                  <div>{{childs.issueTime|formatTime('YMDHMS')}}</div>
                </div>
                <div
                  style="display:flex;flex-direction:column;justify-content:space-around;margin:0 20px"
                >
                  <div>:{{childs.content}}</div>
                  <div>
                    <span class="iconfont" @click="likeIt(childs)">&#xe7c8; {{childs.userLike}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) of comments.rows" :key="index+'item'" v-show="checkmore">
          <div style="display:flex;">
            <div>
              <img :src="item.avatar" style="width:70px;height:70px;">
            </div>
            <div class="nickName">
              <div>{{item.nickName}}</div>
              <div>粉丝({{item.fansNum}})</div>
            </div>
            <div style="position:relative">
              <div class="iconfont adduser" @click="followThisUser(item)">&#xe7ae;</div>
            </div>
          </div>
          <div style="margin-top:10px">评分
            <el-rate
              v-model="item.score"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              style="display:inline-block"
              :max="max"
              allow-half
              disabled
              show-score
            ></el-rate>
          </div>
          <div style="margin-top:10px;line-height:28px">
            {{item.content|readmore(100,'......')}}
            <span
              style="margin-top:4px;float:right;margin-right:10px;color:#409EFF;cursor:pointer"
              @click="navToDetail(item)"
            >查看详情</span>
          </div>
          <div>
            <el-input
              v-model="item.publishcomments"
              placeholder="写下你的评论"
              @focus="handlecomments(item,'focus')"
              @blur="handlecomments(item,'blur')"
              style="width:90%;margin:10px 0"
            ></el-input>
            <el-button
              type="primary"
              round
              style="display:inline-block;margin-left:10px"
              size="small"
              v-if="item.publish"
            >评论</el-button>
          </div>
          <div style="margin-top:10px">
            <div class="intersection">
              <span class="iconfont">&#xe675; {{item.commentNum}}</span>
              <span class="iconfont">&#xe7c8; {{item.userLike}}</span>
              <span class="iconfont">&#xe7c9; {{item.userDislike}}</span>
            </div>
            <div style="clear:both"></div>
          </div>
        </div>
        <div style="cursor:pointer;color:#409EFF" v-show="!checkmore" @click="checkmore=true">
          查看更多精彩评价
          <span class="iconfont">&#xe898;</span>
        </div>
        <div v-show="checkmore">
          <el-pagination
            layout="prev, pager, next"
            :total="comments.total"
            background
            :current-page="comments.currentpage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <div style="cursor:pointer;color:#409EFF" v-show="checkmore" @click="checkmore=false">
          收起
          <span class="iconfont">&#xe78f;</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getCourseDetail,
  getCourseComment,
  paintbread,
  followerthisUser,
  commentothers,
  getcommentList
} from "@/api/ajax";
import axios from "axios";
export default {
  name: "classDetail",
  data() {
    return {
      classData: {},
      id: "",
      checkmore: false,
      nope: [],
      max: 5,
      bread: [
        {
          path: "/",
          name: "首页"
        }
      ],
      classDetail: {},
      comments: {
        num: "123",
        rows: [],
        total: 10,
        pagesize: 10,
        default: [],
        currentpage: 1
      }
    };
  },
  components: {},
  methods: {
    paint() {
      this.id = this.$route.query.id;
      getCourseDetail(this.id).then(res => {
        this.classDetail = res.data.data;
        this.bread.push({
          path: "classes/classDetail",
          name: this.classDetail.title
        });
      });
      getCourseComment(this.id).then(res => {
        _(res.data.data.rows).forEach((v, i, att) => {
          v.score = v.score / 2;
          v.publish = false;
          v.showComment = false;
          v.commentsDetail = {};
        });
        this.comments.rows = res.data.data.rows;
        this.comments.total = res.data.data.total;
        this.comments.default = _.take(this.comments.rows, 2);
      });
    },
    linkto() {
      window.location = "http://www.baidu.com";
    },
    handlecomments(item, type) {
      if (type == "focus") {
        item.publish = true;
      } else {
        if (!item.publishcomments) {
          item.publish = false;
        }
      }
    },
    showItemComment(item) {
      if (item.commentNum > 0) {
        item.showComment = true;
        let params = {};
        let id = item.id;
        getcommentList(id, params).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            item.commentsDetail = res.data.data.rows;
          }
          console.log(item);
        });
      }
    },
    publishcomments(item) {
      console.log(item);
      let params = {};
      params.ccid = item.id;
      params.content = item.publishcomments;
      let headers = {
        "Content-Type": "application/json"
      };
      if (localStorage.getItem("token")) {
        headers.token = localStorage.getItem("token");
      }
      axios({
        method: "post",
        url: "account/a/h/api/comment",
        data: params,
        headers: headers
      }).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "评论成功",
            type: "success"
          });
          item.publish = false;
          item.publishcomments = "";
          this.paint();
        }
      });
    },
    followThisUser(item) {
      let params = {};
      params.toUserId = item.userId;
      params.action = 1;
      followerthisUser(params).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "关注成功",
            type: "success"
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    saveas() {
      this.$message({
        message: "成功添加至个人收藏",
        type: "success"
      });
    },
    editCommets(classDetail) {
      // editComments
      if (this.bread.length == 0) {
        this.$router.push({
          name: "editComments",
          params: {
            item: JSON.stringify(classDetail),
            nope: JSON.stringify(this.nope)
          }
        });
      } else {
        this.$router.push({
          name: "editComments",
          params: {
            item: JSON.stringify(classDetail),
            bread: JSON.stringify(this.bread)
          },
          query: {
            id: classDetail.id
          }
        });
      }
    },
    handleCurrentChange() {},
    navToDetail(v) {
      this.$bus.$emit("pushItem", "课评");
      if (this.bread.length == 0) {
        this.$router.push({
          name: "comments",
          params: {
            item: JSON.stringify(v),
            nope: JSON.stringify(this.nope)
          }
        });
      } else {
        this.$router.push({
          name: "comments",
          query: {
            item: JSON.stringify(v),
            bread: JSON.stringify(this.bread)
          }
        });
      }
    }
  },
  mounted() {
    this.paint();
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  background: white;
  margin-bottom: 100px;
  .header_button {
    margin-top: 30px;
  }
  .commentsDetail {
    display: flex;
  }
  .showComment {
    min-height: 300px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
      0 0 40px rgba(0, 0, 0, 0.06) inset;
    margin: 10px 0;
    width: 93%;
    padding: 20px;
  }
  .class_info {
    padding: 40px 0;
    display: flex;
    align-items: flex-start;
    & > div {
      display: inline-block;
    }
    .class_title_img {
      width: 200px;
      height: 200px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .class_info_content {
      margin: 0 60px;
      & div {
        margin: 20px 0;
        &:hover {
          color: orange;
          cursor: pointer;
        }
      }
    }
  }
  .nickName {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .adduser {
    font-size: 25px;
    cursor: pointer;
    position: absolute;
    bottom: 7px;
    margin-left: 10px;
    &:hover {
      color: orange;
    }
  }
  .intersection {
    width: 20%;
    float: right;
    display: flex;
    & span {
      display: inline-block;
      width: 33%;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>
